自定义事件在 Vue.js 组件中的应用

2023-03-16 15:43| 来源: 网络整理| 查看: 265

Vue.js 组件的自定义事件可以让子组件向父组件传递数据，非常方便实用。在使用自定义事件时，我们可以使用 v-on 来绑定事件，每个 Vue 实例都实现了事件接口，即使用 $on(eventName) 监听事件和使用 $emit(eventName) 触发事件。此外，在父组件中，我们可以使用 v-on 来监听子组件触发的事件。

下面是一个示例，子组件和它外部完全解耦，只需要触发一个父组件关心的内部事件：

Copy

Vue.component('button-counter', { template: '{{ counter }}', data() { return { counter: 0, }; }, methods: { incrementHandler() { this.counter += 1; this.$emit('increment'); }, }, }); new Vue({ el: '#counter-event-example', data: { total: 0, }, methods: { incrementTotal() { this.total += 1; }, }, });

如果要监听某个组件的根元素上的原生事件，可以使用 .native 修饰 v-on。

另外，组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，可以通过 model 选项指定当前的事件类型和传入的 props。

以下是一个示例，父组件的 num 的初始值是 100，更改子组件的值能实时更新父组件的 num：

Copy

输入的数字为:{{num}}

Copy

Vue.component('kxdang-input', { template: `

`, props: ['value'], }); new Vue({ el: '#app', data: { num: 100, }, });

总的来说，Vue.js 组件的自定义事件和 v-model 机制非常强大，能够让我们更加方便地进行组件间的数据交互。需要注意的是，在使用自定义事件时，我们应该避免出现命名冲突，以免产生不必要的错误。同时，在使用 v-model 时，我们也要注意传入的 props 和事件名的对应关系。

【本文地址】

公司简介

联系我们